<template>
    <div class="baidumap">
        <div id="r-result">
            <input type="text" id="suggestId" value="百度" />
        </div>
        <div id="searchResultPanel"></div>
        <div id="allmap"></div>
    </div>
</template>
<script>
/* eslint-disable */
export default {
    mounted() {
        this.initBaiduMap(116.404, 39.915)
    },
    methods: {
        initBaiduMap(lng1, lat1) {
            let map = new BMap.Map('allmap');// 创建Map实例
            map.centerAndZoom(new BMap.Point(lng1, lat1), 14);// 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);
            // 添加一个标注
            let point = new BMap.Point(lng1, lat1);
            let marker = new BMap.Marker(point);// 创建标注
            map.addOverlay(marker);
            // 监听事件
            map.addEventListener('click', function (e) {
                map.clearOverlays(); // 清除所有覆盖物
                let lng = e.point.lng // 经纬度
                let lat = e.point.lat
                point = new BMap.Point(lng, lat);
                marker = new BMap.Marker(point);// 创建标注
                map.addOverlay(marker);
                // 逆地址解析
                // 创建地理编码实例
                let myGeo = new BMap.Geocoder();
                // 根据坐标得到地址描述
                myGeo.getLocation(new BMap.Point(lng, lat), function (result) {
                    if (result) {
                        alert(result.address);
                    }
                });
            });

            let ac = new BMap.Autocomplete(// 建立一个自动完成的对象
                {
                    input: 'suggestId',
                    location: map
                });
            function G(id) {
                return document.getElementById(id);
            }
            // 这段代码好像没用，把搜索的结果塞到searchResultPanel中，或许是给别的功能用的
            ac.addEventListener('onhighlight', function(e) { // 鼠标放在下拉列表上的事件
                let str = '';
                let _value = e.fromitem.value;
                let value = '';
                if (e.fromitem.index > -1) {
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str = 'FromItem<br />index = ' + e.fromitem.index + '<br />value = ' + value;

                value = '';
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str += '<br />ToItem<br />index = ' + e.toitem.index + '<br />value = ' + value;
                G('searchResultPanel').innerHTML = str;
            });

            let myValue;
            ac.addEventListener('onconfirm', function(e) { // 鼠标点击下拉列表后的事件
                let _value = e.item.value;
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                G('searchResultPanel').innerHTML = 'onconfirm<br />index = ' + e.item.index + '<br />myValue = ' + myValue;

                setPlace();
            });

            function setPlace() {
                map.clearOverlays();//清除地图上所有覆盖物
                function myFun() {
                    let pp = local.getResults().getPoi(0).point;// 获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18);
                    map.addOverlay(new BMap.Marker(pp));// 添加标注
                }
                let local = new BMap.LocalSearch(map, {// 智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }
        },
    }
}
</script>
<style lang="scss">
.baidumap {
    height: 600px;
    #r-result {
        width: 1000px;
        input {
            width: 100%;
            height: 40px;
            border: 1px solid #c0c0c0;
            margin-bottom: 3px;
            box-sizing: border-box;
        }
    }
    #searchResultPanel {
        border: 1px solid #c0c0c0;
        width: 150px;
        height: auto;
        display: none;
    }
    #allmap {
        width: 1000px;
        height: 600px;
    }
}
</style>